<template>
  <div class="home_container">
   
           <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <!-- Header头部 搜索框 -->
        <div class="header_search" @click="toSearch">
            <van-search
            v-model="films.fname"
            shape="round"
            background="#16161A"
            placeholder="请输入搜索关键词"/>
        </div>
        

        
        <!-- body部分 -->
        <router-view style="padding-top: 53px; padding-bottom: 53px;"/>
        
    </van-pull-refresh>

        <!-- 底部区域 -->
        <div class="bottem">
            <van-tabbar route>
                <!-- <van-tabbar-item to="/index" icon="home-o">
                  首页
                </van-tabbar-item> -->
                <van-tabbar-item to="/index" icon="home-o" >
                  首页
                </van-tabbar-item>
                <van-tabbar-item to="/aboutUs" icon="manager-o">
                  关于我们
                </van-tabbar-item>
            </van-tabbar>
        </div>

  

  </div>
</template>

<script>
    import { Toast } from 'vant';
export default {
  name: 'Home',
  data () {
   return {
       films:[
           {fname:""}
       ],
       count: 0,
       isLoading: false,
   }
  },
  methods:{
    
    //去搜索
    toSearch(){
       this.$router.push("/search")
    },
    // 下拉刷新的方法
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  }
}
</script>

<style scoped>
   /* 搜索框 */
   .van-search__content{
        background-color: #2E2E31;
    }
    /deep/ .van-icon::before {
       color: aliceblue;
    }
    /* 头部 */
    .header_search{
        position: fixed;
        z-index: 9;
        width: 100%;
    }
    /* 整个容器 */
    .home_container{
        /* height: 1500px; */
        background-color: #16161A;
        /* background-color: #010000; */
        /* background-color: #eeeeee; */
    }
    /* 底部 */
    .van-tabbar--fixed{
        z-index: 9;
        background-color: #16161A;
        /* background-color: #222120; */
        /* background-color: rgb(223 231 234); */
    }
    .van-tabbar-item{
      color: #fcfcfc;
    }
    .van-tabbar-item--active {
      color: #1989fa;
    }
</style>